$light-primary: #0f172a;
$light-secondary: #ffffff;
$light-tertiary: #f8fafc;
$light-accent: #64748b;

$dark-primary: #ffffff;
$dark-secondary: #0f172a;
$dark-tertiary: #1e293b;
$dark-accent: #94a3b8;

@media (prefers-color-scheme: light) {
  :root {
    --primary: #{$light-primary};
    --secondary: #{$light-secondary};
    --tertiary: #{$light-tertiary};
    --accent: #{$light-accent};
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary: #{$dark-primary};
    --secondary: #{$dark-secondary};
    --tertiary: #{$dark-tertiary};
    --accent: #{$dark-accent};

    img {
      filter: brightness(100);
    }
  }
}

html.light {
  --primary: #{$light-primary};
  --secondary: #{$light-secondary};
  --tertiary: #{$light-tertiary};
  --accent: #{$light-accent};

  img {
    filter: none;
  }
}

html.dark {
  --primary: #{$dark-primary};
  --secondary: #{$dark-secondary};
  --tertiary: #{$dark-tertiary};
  --accent: #{$dark-accent};

  img {
    filter: brightness(100);
  }
}

$primary-color: var(--primary);
$secondary-color: var(--secondary);
$tertiary-color: var(--tertiary);
$accent-color: var(--accent);

$spacing-0: 0px;
$spacing-6: 6px;
$spacing-10: 10px;
$spacing-12: 12px;
$spacing-14: 14px;
$spacing-16: 16px;
$spacing-20: 20px;
$spacing-24: 24px;
$spacing-32: 32px;
$spacing-40: 40px;

$grid-margin-xsmall: 10px;
$grid-margin-small: 30px;
$grid-margin-medium: 40px;
$grid-margin-large: 50px;
$grid-margin-xlarge: 60px;

$line-weight: 1px;

$border-radius: 8px;
